<template>
  <div class="home-page">
    <!-- 顶部用户信息栏 -->
    <div class="top-bar">
      <div class="user-avatar">
        <img src="https://via.placeholder.com/40" alt="avatar" />
        <span class="level">0</span>
      </div>
      <div class="search-bar">
        <el-icon class="search-icon"><Search /></el-icon>
        <input type="text" placeholder="跑步节奏训练" />
      </div>
      <div class="icon-group">
        <el-icon class="icon-btn" :size="24"><Medal /></el-icon>
        <el-badge :value="4" class="message-badge">
          <el-icon class="icon-btn" :size="24"><ChatDotRound /></el-icon>
        </el-badge>
      </div>
    </div>

    <!-- 个性定制训练计划 -->
    <div class="custom-plan-card">
      <div class="plan-header">
        <h2>个性定制训练计划</h2>
        <div class="tag">专为 爱吃芒果的_Ke... 打造</div>
      </div>
      <p class="plan-subtitle">1 分钟问卷评估</p>
      
      <div class="plan-stats">
        <div class="stat-item">
          <div class="stat-label">计划时长</div>
          <div class="stat-value">4 - 8<span class="unit">周</span></div>
        </div>
        <div class="stat-item">
          <div class="stat-label">每周训练</div>
          <div class="stat-value">3 - 5<span class="unit">天</span></div>
        </div>
        <div class="stat-item">
          <div class="stat-label">预计消耗</div>
          <div class="stat-value">1000+<span class="unit">卡路里</span></div>
        </div>
      </div>

      <button class="assess-btn">
        <el-icon><Edit /></el-icon>
        评估身体现状，为你定制训练方案
      </button>
    </div>

    <!-- 会员专属 - 智能定制计划 -->
    <div class="section">
      <h3 class="section-title">会员专属 · 智能定制计划</h3>
      <div class="plan-cards">
        <div class="plan-card" v-for="(plan, index) in memberPlans" :key="index">
          <div class="card-tag" :class="plan.tagType">{{ plan.tag }}</div>
          <img :src="plan.image" alt="" />
          <div class="card-info">
            <h4>{{ plan.title }}</h4>
            <p>{{ plan.subtitle }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选标签栏 -->
    <div class="filter-section">
      <div class="filter-tabs">
        <button class="filter-tab active">全部</button>
        <button class="filter-tab">智能定制计划</button>
      </div>
      <div class="filter-options">
        <button class="filter-btn">
          目标 <el-icon><ArrowDown /></el-icon>
        </button>
        <button class="filter-btn">
          部位 <el-icon><ArrowDown /></el-icon>
        </button>
        <button class="filter-btn">
          难度 <el-icon><ArrowDown /></el-icon>
        </button>
        <button class="filter-btn">
          适合人群 <el-icon><ArrowDown /></el-icon>
        </button>
      </div>
    </div>

    <!-- 训练计划列表 -->
    <div class="plan-list">
      <div class="plan-list-card" v-for="(plan, index) in planList" :key="index">
        <div class="vip-badge">
          <el-icon><Discount /></el-icon>
          会员
          <span class="badge-text">智能定制</span>
        </div>
        <img :src="plan.image" alt="" class="plan-image" />
        <div class="plan-content">
          <h3>{{ plan.title }}</h3>
          <p>{{ plan.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Medal, ChatDotRound, Edit, ArrowDown, Discount } from '@element-plus/icons-vue'

// 会员专属计划数据
const memberPlans = ref([
  {
    tag: '近期热门',
    tagType: 'hot',
    image: 'https://via.placeholder.com/200x300',
    title: '大体重 · 全身燃...',
    subtitle: '零基础 不伤膝盖 巨暴汗'
  },
  {
    tag: '近期热门',
    tagType: 'hot',
    image: 'https://via.placeholder.com/200x300',
    title: '学生专属 · 瘦全...',
    subtitle: '学生党减肥必选'
  },
  {
    tag: '智能定制',
    tagType: 'ai',
    image: 'https://via.placeholder.com/200x300',
    title: '告别肚腩计划',
    subtitle: '减掉啤酒肚和内脏脂肪'
  }
])

// 训练计划列表数据
const planList = ref([
  {
    image: 'https://via.placeholder.com/600x400',
    title: '告别脂肪胸计划',
    description: '专为男性量身打造 · 13 万人练过'
  },
  {
    image: 'https://via.placeholder.com/600x400',
    title: '马甲线速成计划',
    description: '4周打造完美腹肌 · 20 万人练过'
  }
])
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px;
}

/* 顶部栏 */
.top-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: white;
  gap: 12px;
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.user-avatar {
  position: relative;
  flex-shrink: 0;
}

.user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
}

.user-avatar .level {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #ff6b6b;
  color: white;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 8px;
  border: 2px solid white;
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
  gap: 8px;
}

.search-icon {
  color: #999;
  font-size: 18px;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
}

.search-bar input::placeholder {
  color: #999;
}

.icon-group {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.icon-btn {
  cursor: pointer;
  color: #333;
}

.message-badge {
  display: flex;
  align-items: center;
}

/* 个性定制训练计划卡片 */
.custom-plan-card {
  margin: 12px 16px;
  background: linear-gradient(135deg, #4a4a4a 0%, #2d2d2d 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.plan-header h2 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.tag {
  background: #667eea;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}

.plan-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.plan-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  font-weight: normal;
}

.assess-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 24px;
  padding: 12px;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.assess-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 会员专属部分 */
.section {
  margin: 20px 0;
  padding: 0 16px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.plan-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.plan-cards::-webkit-scrollbar {
  display: none;
}

.plan-card {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.card-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  z-index: 1;
}

.card-tag.hot {
  background: #ff6b6b;
}

.card-tag.ai {
  background: #51cf66;
}

.plan-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-info {
  padding: 12px;
}

.card-info h4 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #333;
}

.card-info p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 筛选部分 */
.filter-section {
  background: white;
  padding: 16px;
  margin-top: 20px;
}

.filter-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
}

.filter-tab.active {
  color: #333;
  font-weight: bold;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

.filter-options {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.filter-options::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f5f5f5;
  border: none;
  border-radius: 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn:hover {
  background: #e8e8e8;
}

/* 训练计划列表 */
.plan-list {
  padding: 16px;
}

.plan-list-card {
  position: relative;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vip-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 1;
}

.badge-text {
  background: #51cf66;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

.plan-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.plan-content {
  padding: 16px;
}

.plan-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #333;
}

.plan-content p {
  font-size: 14px;
  color: #999;
  margin: 0;
}
</style>
